<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>911</title>
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="./common.css">
    <link rel="stylesheet" href="./fonts/iconfont.css" />

    <style type="text/css">
      #carousel {
        width: 800px;
        height: 300px;
        /* display: relative; */
        position: relative;
        top: 1700px;
        left: 360px;
      }
      #carousel img {
        display: hidden; /* hide images until carousel prepares them */
        cursor: pointer; /* not needed if you wrap carousel items in links */
      }
    </style>
  </head>
  <body>
        <!-- 头部 -->
        <div class="tou">
          <div class="w">
            <div class="logo">
              <h1>
                <a href="index.html">
                  <img src="imgs/logo/porsche-svg.svg" alt="" title="保时捷" />
                </a>
              </h1>
            </div>
            <ul>
              <li><a href="#">所有车型</a></li>
              <li><a href="#">保时捷认可易手车</a></li>
              <li><a href="#">赛车 & 活动</a></li>
              <li><a href="#">个性化与服务</a></li>
              <li><a href="#">关于保时捷</a></li>
            </ul>
            <div class="form">
              <div class="form-t">
                <input type="text" placeholder="城市名" />
                <input type="text" placeholder="输入关键字" />
              </div>
              <div class="form-b">
                <span
                  ><a href="#">
                    <span>车辆配置器</span>
                    <span class="two">>></span>
                  </a></span
                >
              </div>
              <div class="qiechu">
                <div class="gongju">工具与服务</div>
                <a href="#" class="lanping">
                  <div class="liekai">
                    <p>更多</p>
                    <ul>
                      <li>保时捷全球易手车展示平台</li>
                      <li>保时捷智慧互联</li>
                      <li>联系 & 信息</li>
                      <li>保时捷 E 报</li>
                      <li>Porsche Design 车主精品</li>
                      <li>打造您的保时捷</li>
                      <li>车型比较</li>
                      <li>联系我们</li>
                    </ul>
                  </div>
                </a>
            
              </div>
            </div>
          </div>
        </div>
        <!-- 头部偏上 -->
      
        <!-- 车型 -->
    <!-- 911系列 start -->
    <div class="top">
      <div class="bg w">
        <h1>911系列</h1>
        <div class="classify">
          <span class="iconfont icon-menu hezi"></span>
          <div class="tab">
            <ul>
              <li>
                <a href="javascript:;">首页</a>
              </li>
              <li>
                <a href="javascript:;">车型</a>
              </li>
              <li>
                <span class="iconfont icon-down2"></span>
                <a href="javascript:;">Compare models</a>
              </li>
              <li>
                <span class="iconfont icon-up"></span>
                <a href="javascript:;">Top</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 911系列 end -->
    <!-- 型号概述 start -->
    <div class="banner w clearfix">
      <h1>型号概述</h1>
      <div class="left fl">
        <div class="models">
          <span>车型</span>
          <ul>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>718</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-close"></span> <span>911</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>Taycan</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>Panamera</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>Macan</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>Cayenne</span> </a>
            </li>
          </ul>
        </div>
        <div class="models">
          <span>车身设计</span>
          <ul>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>硬顶</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-close"></span> <span>敞篷</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>SUV</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>豪华轿跑</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>Sport Turismo</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>行政加长版</span> </a>
            </li>
          </ul>
        </div>
        <div class="models">
          <span>变速箱</span>
          <ul>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>手动</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-close"></span> <span>Tiptronic</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>PDK</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>双速传动</span> </a>
            </li>
          </ul>
        </div>
        <div class="models">
          <span>座椅</span>
          <ul>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>2</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-close"></span> <span>4 - 5</span> </a>
            </li>
          </ul>
        </div>
        <div class="models">
          <span>驱动类型</span>
          <ul>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>后轮驱动</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-close"></span> <span>四轮驱动</span> </a>
            </li>
          </ul>
        </div>
        <div class="models">
          <span>燃油类型</span>
          <ul>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>汽油</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-close"></span> <span>混合动力</span> </a>
            </li>
            <li>
              <a href="javascript:;"><span class="iconfont icon-add"></span> <span>燃油类型</span> </a>
            </li>
          </ul>
        </div>
        <div class="price clearfix">
          <h1>制造商零售价（含增值税）</h1>
          <div class="ball1"></div>
          <div class="money"></div>
          <div class="ball2"></div>
          <span>545000</span><span>2483000</span>
        </div>
        <div class="horsepower">
          <h1>马力</h1>
          <div class="ball1"></div>
          <div class="power"></div>
          <div class="ball2"></div>
          <span>250hp</span><span>680hp</span>
        </div>
        <div class="box">
          <span class="iconfont icon-arrow-right"></span>
          <span>重置过滤器</span>
        </div>
      </div>
      <!-- 型号概述 end -->
      <!-- 911 start -->
      <div class="right fl clearfix">
        <h1><span class="iconfont icon-arrow-right"></span> 911 Carrera & Targa 车型</h1>
        <div class="box fl">
          <a href="../911two/index.html">
            <img src="./imgs/porsche-thumbwhite.webp" alt="" />
            <span>911 Carera</span><br />
          </a>
         
          <span>1.265.000 元起</span>
        </div>
        <div class="box fl">
          <img src="./imgs/porsche-thumbwhite (1).webp" alt="" />
          <span>911 Carera</span><br />
          <span>1.265.000 元起</span>
        </div>
        <div class="box fl">
          <img src="./imgs/porsche-thumbwhite (2).webp" alt="" />
          <span>911 Carera</span><br />
          <span>1.265.000 元起</span>
        </div>
        <div class="box fl">
          <img src="./imgs/porsche-thumbwhite (3).webp" alt="" />
          <span>911 Carera</span><br />
          <span>1.265.000 元起</span>
        </div>
        <div class="box fl">
          <img src="./imgs/porsche-thumbwhite (4).webp" alt="" />
          <span>911 Carera</span><br />
          <span>1.265.000 元起</span>
        </div>
        <div class="box fl">
          <img src="./imgs/porsche-thumbwhite (5).webp" alt="" />
          <span>911 Carera</span><br />
          <span>1.265.000 元起</span>
        </div>
        <div class="box fl">
          <img src="./imgs/porsche-thumbwhite (6).webp" alt="" />
          <span>911 Carera</span><br />
          <span>1.265.000 元起</span>
        </div>
        <div class="box fl">
          <img src="./imgs/porsche-thumbwhite (7).webp" alt="" />
          <span>911 Carera</span><br />
          <span>1.265.000 元起</span>
        </div>
        <div class="box fl">
          <img src="./imgs/porsche-thumbwhite (8).webp" alt="" />
          <span>911 Carera</span><br />
          <span>1.265.000 元起</span>
        </div>
        <div class="box fl">
          <img src="./imgs/porsche-thumbwhite (9).webp" alt="" />
          <span>911 Carera</span><br />
          <span>1.265.000 元起</span>
        </div>
        <div class="box fl">
          <img src="./imgs/porsche-thumbwhite (10).webp" alt="" />
          <span>911 Carera</span><br />
          <span>1.265.000 元起</span>
        </div>
      </div>
      <!-- 911 end -->
      <!-- new 911 start -->
      <div class="new-right fl clearfix">
        <h1><span class="iconfont icon-arrow-right"></span> 911 Carrera & Targa 车型</h1>
        <div class="box fl">
          <img src="./imgs/porsche-thumbwhite (11).webp" alt="" />
          <span>911 Carera</span><br />
          <span>1.265.000 元起</span>
        </div>
        <div class="box fl">
          <img src="./imgs/porsche-thumbwhite (12).webp" alt="" />
          <span>911 Carera</span><br />
          <span>1.265.000 元起</span>
        </div>
      </div>
      <!-- new 911 end -->
      <!--  -->
      <div id="carousel">
        <img src="./imgs/porsche-thumbwhite (1).webp" alt="Image 1" />
        <img src="./imgs/porsche-thumbwhite (2).webp" alt="Image 2" />
        <img src="./imgs/porsche-thumbwhite (3).webp" alt="Image 3" />
        <img src="./imgs/porsche-thumbwhite (4).webp" alt="Image 4" />
        <img src="./imgs/porsche-thumbwhite (5).webp" alt="Image 5" />
      </div>
      <!--  -->
    </div>
    <!-- 文字部分 start -->
    <div class="text w">
      <h3>* 所列的制造商建议零售价（含增值税）仅供参考，并不包括运输费用、税费（另有明确规定的除外）、牌照、所有权、非强制或地区性要求的设备。特别是，制造商建议零售价（含增值税）并未包含 2016 年 12 月 1 日起生效的《财政部、国家税务总局关于对超豪华小汽车加征消费税有关事项的通知》所要求加征的消费税。根据《关于深化增值税改革有关政策的公告》，自 2019 年 4 月 1 日起增值税税率进行调整。因此所列的厂商建议零售价将可能进行调整。请您与保时捷授权经销商咨询具体的价格信息。</h3>
      <h3>* 所列的制造商建议零售价（含增值税）仅供参考，并不包括运输费用、税费（另有明确规定的除外）、牌照、所有权、非强制或地区性要求的设备。特别是，制造商建议零售价（含增值税）并未包含 2016 年 12 月 1 日起生效的《财政部、国家税务总局关于对超豪华小汽车加征消费税有关事项的通知》所要求加征的消费税。根据《关于深化增值税改革有关政策的公告》，自 2019 年 4 月 1 日起增值税税率进行调整。因此所列的厂商建议零售价将可能进行调整。请您与保时捷授权经销商咨询具体的价格信息。</h3>
    </div>
    <!-- 文字部分 end -->
    <!-- 更多 start -->
    <div class="more w">
      <h1>更多</h1>
      <div class="box">
        <span>911 Carrera & Targa 车型</span>
        <span>|</span>
        <span>全新 911 Turbo S 车型</span>
      </div>
    </div>
    <!-- 更多 end -->
    <footer class="footer_bottom">
      <div class="ipt w">
        <h2>更改国家或地区：</h2>
        <span>选择一个区域</span>
        <span>选择一个国家和地区</span>
      </div>
      <div class="txt w">
        <p>© 2020 保时捷（中国）汽车销售有限公司 <a href="#">法律声明</a> <a href="#">English</a> <a href="沪ICP备10013326号"></a></p>
        <p><img src="./uploads/porsche-normal.png" alt="" /><a href="javascript:;">沪公网安备 31011502014993号</a></p>
        <p>保时捷中国强烈建议您：只在授权的保时捷中心购买车辆和配件。</p>
        <p>请 <a href="#">点击这里</a> 获得更多信息。</p>
        <p><a href="#">环保信息公开</a></p>
      </div>
    </footer>
  </body>
  <script src="./js/index.js"></script>
  <script src="./js/jquery-1.11.0.min.js"></script>
  <script src="./js/jquery.waterwheelCarousel.min.js"></script>
  <script>
       var gongju = document.querySelector(".gongju");
  var liekai = document.querySelector(".liekai");
  var lanping = document.querySelector(".lanping");
  //添加鼠标事件
  gongju.addEventListener("mouseenter", function () {
    lanping.style.display = "block";
    gongju.style.zIndex = 3;
  });
  lanping.addEventListener("mouseleave", function () {
    lanping.style.display = "none";
    gongju.style.zIndex = 1;
  });
    $(document).ready(function () {
   
      $("#carousel").waterwheelCarousel({
        // include options like this:
        // (use quotes only for string values, and no trailing comma after last option)
        // option: value,
        // option: value
      });
    });
  </script>
</html>
